<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n'
import { ElButton, ElTag,ElRow,ElCol,ElTree,ElForm,ElFormItem,ElInput } from 'element-plus'
import { Table } from '@/components/Table'
import { getTableListApi, delTableListApi } from '@/api/table'
import { useTable } from './vCircle/web/vCircleTable'
import {computed, h, inject, nextTick, reactive, ref, unref, useAttrs, useSlots, watch} from 'vue'
import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { TableColumn } from '@/types/table'
import { getFanKui, fanKui,chaunzhi} from '@/views/QuanXian/vCircle/table'
import { Dialog } from '@/components/Dialog'

const { push } = useRouter()

const { register, tableObject, methods } = useTable<TableData>({
  getListApi: fanKui,
  delListApi: delTableListApi,
  response: {
    list: 'list',
    total: 'total'
  }
})

const data = ref({})
  getFanKui().then((res)=>{
    data.value = res.data;
  })
const { getList, setSearchParams } = methods
getList()

useEmitt({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
      tableObject.currentPage = 1
    }
    getList()
  }
})
const { t } = useI18n()

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'feedbackId',
    label: "序号",
    type: 'id'
  },
  {
    field: 'account',
    label: "用户账号"
  },
  {
    field: 'feedbackType',
    label: "意见反馈类型",
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return h(
          ElTag,
          {
            type: cellValue === 2 ? 'success' : cellValue === 3 ? 'warning' : 'danger'
          },
          () =>
              cellValue === 2
                  ? "视频反馈"
                 : cellValue === 3
                  ? "商品反馈"
                  : "其他反馈"
      )
    }
  },
  {
    field: 'feedbackClassification',
    label: "意见分类",
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return h(
          ElTag,
          {
            type: cellValue === 2 ? 'success' : cellValue === 3 ? 'warning' : 'danger'
          },
          () =>
              cellValue === 2
                  ? "很好"
                  : cellValue === 3
                    ? "好"
                  : cellValue === 4
                    ? "一般"
                  : "差"
      )
    }
  },
  {
    field: 'createDate',
    label: "反馈时间"
  },
  {
    field: 'feedbackContent',
    label: "反馈内容",
  },
  {
    field: 'action',
    label: "操作"
  },

])

const { allSchemas } = useCrudSchemas(crudSchemas)

//受理：
const action = (row : TableData,type:string) => {
  push(`/example/example-${type}?id=${row.id}`)
}

const yiShouLi = (ese)=>{
  A=ese
  tableObject.params=Object.assign(tableObject.params,{
    feedbackStatus:ese
  })
  getList();
}
const daiShenHe =(ese)=>{
  A=ese
  tableObject.params=Object.assign(tableObject.params,{
    feedbackStatus:ese
  })
  getList();
}

//表单查询
import { Form } from '@/components/Form'
import {FormSchema} from "@/types/form";
import {TableData} from "@/api/table/types";
import {propTypes} from "@/utils/propTypes";
import {isNumber} from "@/utils/is";
const schema = reactive<FormSchema[]>([
  {
    field: 'account',
    label: '用户账号',
    component: 'Input'
  },{
    field: 'feedbackType',
    label: '反馈类型',
    component: 'Select',
    componentProps:{
      options:[
        {
          label:"视频反馈",
          value:"2"
        },
        {
          label:"商品反馈",
          value:"3"
        },
        {
          label:"其他反馈",
          value:"4"
        }
      ]
    }
  },
  {
    field: 'feedbackClassification',
    label: '意见分类',
    component: 'Select',
    componentProps:{
      options:[
        {
          label:"很好",
          value:"2"
        },
        {
          label:"好",
          value:"3"
        },
        {
          label:"一般",
          value:"4"
        },
        {
          label:"差",
          value:"5"
        }
      ]
    }
  }
])

let A = ref();
const zzz = ref(false)

const shouLi = (res) => {
  zzz.value=true
  form=res
}
let form = ref({})
//局部刷新
let ceshi = inject("reload");

const onSubmit = (row) => {
  chaunzhi(4,row.feedbackId).then((res)=>{})
  ceshi()
  zzz.value=false
}

</script>

<template>

  <ElRow class="row-con">
    <ElCol :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <ContentWrap>
        <el-row class="mb-4">
          <el-button type="primary" @click="daiShenHe(3)">待审核({{data.waitNum}})</el-button>
          <el-button type="primary" @click="yiShouLi(4)">已受理({{data.acceptedNum}})</el-button>
        </el-row>
        <Search
            :expand = "true"
            :schema="schema"
            @search= "setSearchParams"
            @reset= "setSearchParams"/>
        <Table
            v-model:pageSize="tableObject.pageSize"
            v-model:currentPage="tableObject.currentPage"
            :columns="allSchemas.tableColumns"
            :data="tableObject.tableList.slice((tableObject.currentPage-1) * tableObject.pageSize, tableObject.currentPage * tableObject.pageSize)"
            :loading="tableObject.loading"
            :pagination="{total: tableObject.total}" @register="register">
          <template #action="{ row }">
            <ElButton type="warning" @click="shouLi(row)" v-if="row.feedbackStatus==3">受理</ElButton>
            <ElButton type="success" @click="shouLi(row)" v-else="row.feedbackStatus==4">详情</ElButton>
          </template>
        </Table>
        <Dialog v-model="zzz" :title="t('dialogDemo.dialog')">

          <ElForm :model="form" label-width="120px">
            <ElFormItem label="用户账号">
              <ElInput v-model="form.account" disabled/>
            </ElFormItem>
            <ElFormItem label="反馈类型" v-model="form.feedbackType">
              <div v-if="form.feedbackType===2">视频反馈</div>
              <div v-else-if="form.feedbackType===3">商品反馈</div>
              <div v-else="form.feedbackType===4">其他反馈</div>
            </ElFormItem>
            <ElFormItem label="意见类型" v-model="form.feedbackClassification">
              <div v-if="form.feedbackClassification==2">很好</div>
              <div v-else-if="form.feedbackClassification==3">好</div>
              <div v-else-if="form.feedbackClassification==4">一般</div>
              <div v-else="form.feedbackClassification==5">差</div>
            </ElFormItem>
            <ElFormItem label="反馈时间">
              <ElInput v-model="form.createDate" disabled/>
            </ElFormItem>
            <el-form-item label="反馈内容">
              <ElInput v-model="form.feedbackContent" type="textarea" />
            </el-form-item>
          </ElForm>
          <template #footer >
            <div>
              <ElButton type="primary" @click="onSubmit(form)" v-if="form.feedbackStatus==3">{{ t('dialogDemo.submit') }}</ElButton>
              <ElButton @click="zzz = false">{{ t('dialogDemo.close') }}</ElButton>
            </div>
          </template>
        </Dialog>
      </ContentWrap>
    </ElCol>
  </ElRow>
</template>
